import React from "react";

interface State {
  name: string;
  age: number;
}

interface Props {
  message: string;
}

export default class extends React.PureComponent<Props, State> {
	h3: React.RefObject<HTMLHeadingElement>
  constructor(props: Props) {
    super(props);
    this.state = {
      name: "哈哈哈",
      age: 18,
    };

		this.h3 = React.createRef()
  }
  render(): React.ReactNode {
    const { name, age } = this.state;
    const { message } = this.props;

    return (
      <div>
        <h2>类组件</h2>
        <h3 ref={ this.h3 }>
          {name}---{age}---{message}
        </h3>
        <button onClick={() => this.setState({ age: 20 })}>修改age</button>
      </div>
    );
  }
  componentDidMount(): void {
    console.log("准备就绪");
    console.log(document.querySelector("h3"));
		console.log(this.h3.current)
    /**
     * 1. 请求数据
     * 2. 获取节点
     * 3. 添加事件
     * 4. 实例化
     * */
  }

  componentDidUpdate(
    prevProps: Readonly<{}>,
    prevState: Readonly<State>,
    snapshot?: any
  ): void {
    console.log(2);
  }
}
